<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>报名列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
    <script src="common.js"></script>
    <link rel="stylesheet" href="common.css">
</head>
<body>
<div class="layui-container-fluid">

    <!--标题-->
    <div class="layui-bg-cyan">
        <h1 id="title-container" class="title">~~</h1>
        <p class="subtitle">已填写</p>
    </div>
    <table class="layui-table" id="table-container">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr id="thead-container">
            <!--表头-->
        </tr>
        </thead>
        <tbody id="tbody-container">


        </tbody>
    </table>

    <fieldset class="layui-elem-field">
        <legend>导出</legend>
        <div class="layui-form layui-field-box">
            <button id="dbToExcel" class="layui-btn layui-btn-fluid">导出为EXCEL</button>


        </div>
    </fieldset>

    <div id="el-footer"></div>

</div>


<script>


    let query = getOneQuery();
    //Demo
    layui.use(['layer', 'jquery', 'form'], function () {
        let $ = layui.jquery, layer = layui.layer, form = layui.form;
        let init = layer.load();
        let theadContainer = $('#thead-container');
        let titleContainer = $("#title-container");
        let tableContainer = $("#table-container");
        let tbodyContainer = $('#tbody-container');
        let title = '';
        $.post(api.getExcelTpl, {s: query}, function (res) {
            if (res.errno === 0) {
                titleContainer.html(res.data.title);
                title = res.data.title;
                let excelTpl = JSON.parse(res.data.tpl);
                let thead = '';
                thead += tpl.th('序号');
                excelTpl.head.forEach(function (obj) {

                    thead += tpl.th(obj.title);
                });
                theadContainer.html(thead);

            }
        });

        $.post(api.items, {s: query}, function (res) {
            layer.close(init);
            if (res.errno === 0) {
                let tr = '';
                res.data.forEach(function (obj, index) {
                    let itemsValues = JSON.parse(obj.data);
                    tr += '<tr>';
                    tr += `<td>${++index}</td>`;
                    for (let i in itemsValues) {
                        tr += "<td>" + itemsValues[i] + "</td>";
                    }

                    tr += '<tr/>';
                });
                tbodyContainer.html(tr);
            }

            if (res.errno === 10000) {
                layer.close(init);
                layer.msg(res.errmsg);
                tableContainer.remove();
            }
        });

        $('#dbToExcel').click(function () {
            layer.alert(`确定导出 [ ${title}.xls ] ?`, function () {
                location.href = api.dbToExcel + ".html?q=" + query;
                layer.closeAll();
            });

        });

        $('#el-footer').html(tpl.footer());
    });

</script>
</body>
</html>